<template>
  <div id="app">
    <div class="header">
      <div class="top">
        <div class="left">
          <h3><nut-icon @click="back" name="left"></nut-icon></h3>
        </div>
        <div class="right">
          <h3>订单填写</h3>
        </div>
      </div>
    </div>
    <div class="zw" style="height: 42px"></div>
    <div class="main">
      <div class="headerTop">
        <ul>
          <li style="margin-left: 2%">{{ moments.dStation }}</li>
          <li>{{ moments.trainNumber }}</li>
          <li style="margin-right: 2%">{{ moments.aStation }}</li>
        </ul>
        <ul>
          <li style="margin-left: 2%">
            <h3>{{ moments.dTime }}</h3>
          </li>
          <li>
            <img style="width: 60px" src="../../../public/img/12.png" alt="" />
          </li>
          <li style="margin-right: 2%">
            <h3>{{ moments.aTime }}</h3>
          </li>
        </ul>
        <ul>
          <li style="margin-left: 2%">09-09</li>
          <li>耗时{{ moments.time }}</li>
          <li style="margin-right: 2%">09-09</li>
        </ul>
      </div>
      <div class="bottom">
        <ul>
          <li style="margin-left: 2%">坐席</li>
          <li>
            {{ reserve.type }}
            <span style="color: orange">￥{{ reserve.priceMsg }}</span>
          </li>
          <li style="margin-right: 2%"></li>
        </ul>
      </div>
      <div v-if="msgdatas == [] ? false : true">
        <div v-for="(v, i) in msgdatas" :key="i">
          <van-contact-card
            type="edit"
            :name="v.booker"
            tel="13000000000"
            :editable="false"
          />
        </div>
      </div>
      <div class="headerBottom">
        <ul>
          <li>添加成人</li>
          <li @click="order">选择乘客</li>
        </ul>
      </div>
    </div>
    <div>
      <div v-show="msgdatas == '' ? false : true">在线选座</div>
      <div v-for="(v, i) in msgdatas" :key="i" style="display: flex">
        <van-icon
          :class="
            v.is_class == 1
              ? 'animate__animated animate__fadeIn active'
              : 'actri'
          "
          @click="classbtn(i, 1)"
          name="font"
          size="26"
          style="flex: 1"
        />
        <van-icon
          :class="
            v.is_class == 2
              ? 'animate__animated animate__fadeIn active'
              : 'actri'
          "
          @click="classbtn(i, 2)"
          name="font"
          size="26"
          style="flex: 1"
        />
        <van-icon
          :class="
            v.is_class == 3
              ? 'animate__animated animate__fadeIn active'
              : 'actri'
          "
          @click="classbtn(i, 3)"
          name="font"
          size="26"
          style="flex: 1"
        />
        <van-icon
          :class="
            v.is_class == 4
              ? 'animate__animated animate__fadeIn active'
              : 'actri'
          "
          @click="classbtn(i, 4)"
          name="font"
          size="26"
          style="flex: 1"
        />
        <van-icon
          :class="
            v.is_class == 5
              ? 'animate__animated animate__fadeIn active'
              : 'actri'
          "
          @click="classbtn(i, 5)"
          name="font"
          size="26"
          style="flex: 1"
        />
      </div>
    </div>
    <div style="width: 100%; height: 100px"></div>
    <div class="footer">
      <div class="left">
        <span style="color: orange">￥{{ reserve.priceMsg }}</span>
        <p style="color: #ccc">支付金额</p>
      </div>
      <div class="count"></div>
      <div class="right"><button @click="submitOrder">提交订单</button></div>
    </div>
  </div>
</template>

<script lang="ts">
import { api } from "../../api/api";
import { reactive, ref, toRefs, onBeforeMount } from "vue";
import router from "../../router";
export default {
  setup() {
    // 返回上一页
    const state = reactive({
      reserve: JSON.parse(localStorage.getItem("reserve") || ""),
      moments: JSON.parse(localStorage.getItem("moment") || ""),
      val: {
        booker: "张一诺",
        carriag: "03",
        id: 1,
        priceMsg: "182",
        seatNumber: "17A",
        status: 1,
        ticketDate: "2022-09-09 07:00 至 2022-08-23 11:29",
        trainName: "北京南-上海虹桥 G157",
      },
      msgdatas:
        localStorage.getItem("msgdata") == null
          ? []
          : JSON.parse(localStorage.getItem("msgdata") || ""),
    });
    onBeforeMount(() => {
      if (state.msgdatas == "") {
      } else {
        state.msgdatas.forEach((res: any) => {
          res = {
            ...res,
            is_class: 0,
          };
        });
      }
    });
    function back() {
      history.go(-1);
    }
    // 跳转乘客
    function order() {
      router.push("/passenger");
    }
    // 跳转订单
    function submitOrder() {
      localStorage.setItem("particulars", JSON.stringify(state.val));
      router.push("/submitOrder");
    }
    function classbtn(id: number, val: number) {
      state.msgdatas[id].is_class = val;
      console.log(state.msgdatas[id]);
    }
    return {
      ...toRefs(state),
      // 返回上一页
      back,
      order,
      submitOrder,
      classbtn,
    };
  },
};
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 844px;
  background: #eee;
}
html,
body {
  width: 100%;
  background: #eee;
}
.header {
  width: 100%;
  background: #1ba9ba;
  height: 40px;
  position: fixed;
}
.active {
  color: #1ba9ba;
}
.top {
  display: flex;
  color: white;
  height: 40px;
  line-height: 40px;
  .left {
    margin-left: 2%;
  }
  .right {
    flex: 1;
    text-align: center;
  }
}
.actri {
  color: #ccc;
}
.main {
  width: 100%;
  .headerTop {
    height: 3rem;
    background: white;
    line-height: 1rem;
    font-size: 0.31rem;
    ul {
      display: flex;
      justify-content: space-between;
    }
  }
  .bottom {
    margin-top: 3%;
    height: 1.4rem;
    line-height: 1.4rem;
    background: white;
    ul {
      display: flex;
      justify-content: space-between;
    }
  }
  .headerBottom {
    margin-top: 3%;
    height: 1.4rem;
    line-height: 1.4rem;
    background: white;
    ul {
      display: flex;
      justify-content: space-evenly;
      li {
        color: #1ba9ba;
      }
    }
  }
}
.footer {
  width: 100%;
  position: fixed;
  background: white;
  z-index: 100;
  bottom: 0;
  height: 1.4rem;
  display: flex;
  .left {
    margin-left: 2%;
    margin-top: 0.3rem;
  }
  .right {
    margin-right: 2%;
    button {
      width: 2.8rem;
      height: 1.1rem;
      border: none;
      background: #1ba9ba;
      border-radius: 0.1rem;
      color: white;
      margin-top: 0.2rem;
    }
  }
  .count {
    flex: 1;
  }
}
.animate__animated.animate__fadeIn {
  --animate-duration: 3s;
}
</style>
